<template>
	<view class="border-top border-light-secondary p-3">
		<view class="flex flex-column justify-center align-center bg-main rounded py-4">
			<text class="font-sm text-white mb-1">当前金币</text>
			<text style="font-size: 60rpx;" class="font-weight-bold text-white">{{coin}}</text>
		</view>
		<view class="border-top border-light-secondary mt-3 mb-2"></view>
		<view>
			<text class="font-sm text-muted">请选择充值金额</text>
		</view>

		<view class="flex flex-wrap" style="margin-left: -20rpx;margin-right: -20rpx;">
			<view class="p-2" style="box-sizing: border-box;width: 33.3333%;" v-for="(item,index) in coinList"
				:key="index" @click="choiceCoin(index)">
				<view v-if="item.price>0" style="height: 130rpx;"
					class="border rounded flex flex-column justify-center align-center"
					:class="activeIndex===index?'border-main':''">
					<view class="flex align-center">
						<text class=" iconfont text-warning mr-1">&#xe626;</text>
						<text class="font-md font-weight-bold">{{item.coin}}</text>
					</view>
					<text class="font text-light-muted">￥{{item.price}}</text>
				</view>
				<!-- 自定义金额 -->
				<view v-else style="height: 130rpx;"
					class="border rounded flex flex-column justify-center align-center">
					<text class="font text-light-muted">自定义</text>
				</view>
			</view>
		</view>
		<view class="position-fixed bottom-0 left-0 right-0 border-top flex px-3 align-center" style="height: 100rpx;">
			<view class="flex align-center ml-1">
				<text class=" iconfont text-warning mr-1">&#xe626;</text>
				<text class="font-md font-weight-bold">{{price}}</text>
			</view>
			<view class="bg-main rounded flex align-center justify-center ml-auto" style="height: 70rpx;width: 150rpx;" @click="pay">
				<text class="text-white font-md">去充值</text>
			</view>
		</view>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog inputType="Number" mode="input" title="自定义充值" message="自定义充值" placeholder="请输入充值金额"
				:duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/component/uni-ui/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/component/uni-ui/uni-popup/uni-popup-dialog.vue';
	export default {
		data() {
			return {
				activeIndex: 0,
				coin:0,
				coinList: [{
						coin: 10,
						price: 10
					},
					{
						coin: 20,
						price: 20
					},
					{
						coin: 30,
						price: 30
					},
					{
						coin: 50,
						price: 50
					},
					{
						coin: 100,
						price: 100
					},
					{
						price: 0
					}
				],
				price: 0
			}
		},
		components: {
			uniPopup,
			uniPopupDialog
		},
		onLoad() {
			this.coin = this.$store.state.user.coin
			let price = this.coinList[this.activeIndex].price
			if (price > 0) {
				this.price = price
			}
		},
		methods: {
			pay(){
				this.$H.post('/gift/wxpay',{
					price:this.price
				},{token:true}).then(orderInfo=>{
					uni.requestPayment({
						provider:"wxpay",
						orderInfo:orderInfo,
						success: (res) => {
							this.$store.dispatch('getUserInfo')
							uni.showToast({
								title:'充值成功',
								icon:'none'
							});
							uni.navigateBack({
								delta:1
							})
						},
						fail: () => {
							uni.showModal({
								title:'提示',
								content:'支付失败',
								showCancel:false
							})
						}
					})
				}).catch(err=>{
					console.log(err)
				})
			},
			choiceCoin(index) {
				this.activeIndex = index
				let price = this.coinList[index].price
				if (price > 0) {
					this.price = price
				} else {
					this.$refs.popup.open()
				}
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(done,value) {
				// 输入框的值
				if(!value){
					return uni.showToast({
						title:"请输入充值金额",
						icon:'none'
					})
				}
				this.price = value
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				done()
			}
		}
	}
</script>

<style>
</style>
